<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="product-container.html">

<dom-module id="product-list">
    <style>
        :host {
            width: 100%;
        }

        paper-header-panel {
            float: left;
            width: 100%;
            height: 982px;
            @apply(--shadow-elevation-2dp);
        }

        .paper-header {
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            padding: 0 10px;
            color: #ffffff;
            background-color: #c0ca33;
            transition: height 0.2s;
        }

        .flex-wrap {
            @apply(--layout-horizontal);
            @apply(--layout-wrap);
            width: 100%;
        }
    </style>
    <template>
        <paper-header-panel>
            <div class="paper-header">设备列表</div>

            <div class="container flex-wrap">

                <product-container label-text="朗格1800吨 (螺杆Ø122mm)"
                                   url="/images/machines/machine18.jpg"></product-container>
                <product-container label-text="朗格1300吨 (螺杆Ø110mm)"
                                   url="/images/machines/machine17.jpg"></product-container>
                <product-container label-text="朗格1100吨 (螺杆Ø108mm)"
                                   url="/images/machines/machine16.jpg"></product-container>
                <product-container label-text="朗格800吨 (螺杆Ø85mm)"
                                   url="/images/machines/machine15.jpg"></product-container>
                <product-container label-text="朗格650吨 (螺杆Ø80mm)"
                                   url="/images/machines/machine14.jpg"></product-container>
                <product-container label-text="朗格500吨 (螺杆Ø75mm)"
                                   url="/images/machines/machine13.jpg"></product-container>
                <product-container label-text="朗格400吨 (螺杆Ø70mm)"
                                   url="/images/machines/machine12.jpg"></product-container>
                <product-container label-text="川口360吨 (螺杆Ø69mm)"
                                   url="/images/machines/machine11.jpg"></product-container>
                <product-container label-text="川口360吨 (螺杆Ø69mm)"
                                   url="/images/machines/machine10.jpg"></product-container>
                <product-container label-text="川口300吨 (螺杆Ø62mm)"
                                   url="/images/machines/machine09.jpg"></product-container>
                <product-container label-text="海天平衡250吨双色机 (A螺杆)"
                                   url="/images/machines/machine08.jpg"></product-container>
                <product-container label-text="朗格250吨高速机 (螺杆Ø45mm)"
                                   url="/images/machines/machine07.jpg"></product-container>
                <product-container label-text="朗格250吨 (螺杆Ø49mm)"
                                   url="/images/machines/machine06.jpg"></product-container>
                <product-container label-text="朗格210吨 (螺杆Ø42mm)"
                                   url="/images/machines/machine05.jpg"></product-container>
                <product-container label-text="朗格160吨 (螺杆Ø41mm)"
                                   url="/images/machines/machine04.jpg"></product-container>
                <product-container label-text="朗格160吨高速机 (螺杆Ø38mm)"
                                   url="/images/machines/machine03.jpg"></product-container>
                <product-container label-text="朗格130吨 (螺杆Ø38mm)"
                                   url="/images/machines/machine02.jpg"></product-container>
                <product-container label-text="朗格130吨高速机 (螺杆Ø35mm)"
                                   url="/images/machines/machine01.jpg"></product-container>

            </div>
        </paper-header-panel>
    </template>

    <script>
        Polymer({
            is: 'product-list',

        });
    </script>
</dom-module>